<template>
    <div>
      <el-form :model="adminForm" label-width="auto" style="max-width: 600px">
      
      <el-form-item>
        <!-- 如果想在ElementUI中使用变色的label 在el-from以及el-form-item中设置style或者label-color是不行的 -->
        <span slot="label">
          <span style="color: red; font-weight: bold">*</span>
          <span style="font-size: 18px">账号:</span>
        </span>
        <el-input
        v-model="adminForm.adminID"
        style="width: 310px;margin-left: 18px; height: 40px;"
        placeholder="请输入您的账号"
        :prefix-icon="Search"
      />
      </el-form-item>
      <el-form-item >
        <span slot="label">
          <span style="color: red; font-weight: bold">*</span>
          <span style="font-size: 18px">密码：</span>
        </span>
        <el-input
        v-model="adminForm.password"
        style="width: 310px;margin-left: 6px; height: 40px;"
        placeholder="请输入您的账户密码"
        :prefix-icon="Lock"
        show-password
      />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="button" @click="login"
          >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button
        >
      </el-form-item>  
    </el-form>
    </div>
  </template>
  
<script setup>
import { ref,inject } from "vue";
import { useRouter } from "vue-router";
import { Lock, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const axios = inject("axios")
const adminForm = ref({
    adminID:"",
    password:""  
})
const admin = ref({
})




const router = useRouter();
const login =  async() => {
  // 表单验证
  
  await axios.post('Admin/getAdminName',{
    adminID:adminForm.value.adminID,
    password:adminForm.value.password
  }).then( (response) => {  
    admin.value = response.data;
    console.log(admin.value)
  })
  .catch((error) => {
    console.log(error);
  });
  if (adminForm.value.adminID== "" || adminForm.value.password == "") 
  {
    ElMessage({
    message: '登录失败，请输入完整信息！',
    type: 'warning',
    plain: true,
  })
  } 
  else if (admin.value.role == adminForm.value.role)//在API已经验证password 
   { 
    sessionStorage.setItem("admin", admin);
    ElMessage({
    message: '登录成功！',
    type: 'success',  
    plain: true,
  })
  router.push({
      path:'/IndexA',
      query:{
        adminID:admin.value.adminID
      }
    })
  } else {    

    console.log(admin.value)  

    ElMessage.error('登录失败，请检查密码是否正确！')
  }
}
  </script>
  
  <style scoped>
  .el-form-item {
    display: flex;
  }
  .button {
    margin-top: 10px;
    margin-left: 0px;
    width: 400px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
  }
  </style>